<!--
*@09.SignerDetail
*@author wangyinfei
*@date 2021/8/28 21:12
-->
<template>
    <div class="signer-detail">
        <div class="signer-detail-top">
            <div class="signer-detail-top-img">
                <img :src="this.picUrl">
            </div>
            <div class="signer-detail-top-txt">
                <div class="name">
                    <div class="name-left">
                        歌手
                    </div>
                    <div class="name-right">
                        {{this.name}}
                    </div>
                </div>
                <div class="detail">
                    <div class="one" >
                        <p style="color: #0C73C2;font-size:14px">单曲数:</p>
                        <p style="font-size:14px;margin-left:5px;margin-top:2px">{{this.musicSize}}</p>
                    </div>
                    <div class="one">
                        <p style="color: #0C73C2;font-size:14px">专辑数: </p>
                        <p style="font-size:14px;margin-left:5px;padding-top:1.5px">{{this.albumSize}}</p>
                    </div>
                    <div class="one">
                        <p style="color: #0C73C2;font-size:14px">MV数:</p>
                        <p style="font-size:14px;margin-left:5px">{{this.mvs.length}}</p>
                    </div>
                  
                    <div class="detail-detail">
                        <div style="display:flex;width:33.34px;flex-direction: row;">
                              <p style="color: #0C73C2;font-size:14px;">简介:</p>
                        </div>
                      
                        <div style="display:flex;width:856.86px;flex-direction:row;-webkit-line-clamp:3;-webkit-box-orient:vertical;">
                            <p style="font-size:14px;margin-left:5px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden">{{this.briefDesc}}</p>
                        </div>
                    </div>

                    <div>

                    </div>
                </div>
            </div>
        </div>
        <div class="signer-detail-bottom">
            <div class="title">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="专辑" name="first">
                    <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
                    
                    </ul>
                    <div class="albumSize" >
                        <div class="albumSize-left">
                            <img :src="this.songs[0].al.picUrl">
                        </div>
                        <div class="albumSize-right">
                            <!--    -->
                            <div style="margin-left:22px;width: 978.34px;">热门50首</div>
                            <!-- v-for="(index,item) in" :key="index" -->
                            <div class="albumSize-right-singer" v-for="(item,index) in songs" :key="index" >
                              
                                <div  class="albumSize-right-singer-one" >
                                    <div class="number" v-if="index<9" >0{{index+1}}</div>
                                     <div class="number" v-if="index>=9" >{{index+1}}</div>
                                    <div class="songs-name" @click="getPlay(item.id)">{{item.name}}</div>
                                     <div style="line-height:26px">{{item.dt}}</div>
                                </div>
                               
                            </div>
                        </div>
                    </div>
                    
                </el-tab-pane>
                <!-- <el-tab-pane label="MV" name="second">MV</el-tab-pane> -->
                <el-tab-pane label="歌手详情" name="third">
                    <div class="geshou-detail" >
                        <div style="font-size:16px;font-weight:bold;margin-top:5px">简介</div>
                        <div class="geshou-detail-brife">{{this.briefDesc}}</div>
                        <div class="geshou-detail-introduction" v-for="(item,index) in introduction" :key="index">
                            <div style="font-size:16px;font-weight:bold;margin-top:5px">
                                {{item.ti}}
                            </div>
                            <div class="geshou-detail-brife">{{item.txt}}</div>
                        </div>
                    </div>
                </el-tab-pane>
                <!-- <el-tab-pane label="相似歌手" name="fourth">相似歌手</el-tab-pane> -->
            </el-tabs>  
            </div>
           
         
        </div>
    </div>

</template>

<script>

    export default {
        name: "signerdetail",
        props: {},
        components: {},
        mounted: {},
        data() {
            return {
                id:"",
                songs:{},
                name:"",
                picUrl:"",
                albumSize:"",
                musicSize:"",
                mvs:{},
                briefDesc:"",
                activeName: 'first',
                hotAlbums:{},
                id:"",
                introduction:""
            }
        },
        created(){
            this.id=this.$route.params.id;
            console.log(this.$route.params.id);
            console.log(this.id);
            this.ajax();
            this.ajax2();
            this.ajax3();
            this.ajax4();
            this.ajax5();
        },
        methods: {
            ajax(){
                    axios({
                        url:'https://autumnfish.cn/artist/top/song?id='+this.id,
                        //https://autumnfish.cn/artist/top/song?id=5781
                        // https://autumnfish.cn/artist/desc?id=5781
                        //  https://autumnfish.cn/artist/mv?id=5781
                        methods:'get',
                        params:{
                        
                        }
                //    https://autumnfish.cn/comment/event?threadId=A_EV_2_6559519868_32953014
                }).then(res=>{
                    this.songs=res.data.songs;
                    console.log(res.data)
                    console.log(res.data.songs)
                    // console.console.log(this.songs.al.name);
                    for(let i=0;i<this.songs.length;i++){
                        
                        let dt=this.songs[i].dt
                        // 假定350750毫秒
                        // 秒350750/1000  350秒
                        // 分350/60
                        // 秒350%60
                        let min=parseInt(dt/1000/60)
                        // 样式好看
                        if(min<10) {
                            min='0'+min
                        }
                        let sec=parseInt((dt/1000)%60)
                        if(sec<10){
                            sec='0'+sec
                        }
                        // console.log(min+'|'+sec)
                        this.songs[i].dt=`${min}:${sec}`
                    }
                })
            },
            ajax2(){
                    axios({
                        url:'https://autumnfish.cn/artist/album?id='+this.id,
                    // https://autumnfish.cn/artist/album?id=5781
                        methods:'get',
                        params:{
                        
                        }
                }).then(res=>{
                    // 歌手名称
                    // console.log(res)
                    this.name=res.data.artist.name;
                    console.log(res.data.artist.name);
                    // 歌手图片
                    this.picUrl=res.data.artist.picUrl;
                    // 专辑数
                    this.albumSize=res.data.artist.albumSize;
                    this.musicSize=res.data.artist.musicSize;
                    // 热门专辑
                    this.hotAlbums=res.data.hotAlbums
                })
            },
             ajax3(){
                    axios({
                        url:'https://autumnfish.cn/artist/mv?id='+this.id,
                    // https://autumnfish.cn/artist/album?id=5781
                    // https://autumnfish.cn/artist/desc?id=5781
             

                    // https://autumnfish.cn/song/detail?ids=1463165983

                        methods:'get',
                        params:{
                        
                        }
                //    https://autumnfish.cn/comment/event?threadId=A_EV_2_6559519868_32953014
                }).then(res=>{
                    // 歌手名称
                    this.mvs=res.data.mvs;
                    // console.log(this.mvs.length);
                })
            },
             ajax4(){
                    axios({
                        url:'https://autumnfish.cn/artist/detail?id='+this.id,
                        // https://autumnfish.cn/artist/detail?id=5781
                    // https://autumnfish.cn/artist/album?id=5781
                    // https://autumnfish.cn/artist/desc?id=5781
                    // https://autumnfish.cn/playlist/detail?id=24381616
                    // https://autumnfish.cn/playlist/detail?id=5781
                    // https://autumnfish.cn/song/detail?ids=169159
                    //  https://autumnfish.cn/song/url?id=1374056689
                    // https://autumnfish.cn/lyric?id=1463165983

                        methods:'get',
                        params:{
                        
                        }
                //    https://autumnfish.cn/comment/event?threadId=A_EV_2_6559519868_32953014
                }).then(res=>{
                    // 歌手名称s
                    // console.log(res.data.data);
                   this.briefDesc=res.data.data.artist.briefDesc;
                   
                //    console.log(res.data.data.artist.briefDesc)
                })
            },
 
             ajax5(){
                 
                    axios({
                        url:'https://autumnfish.cn/artist/desc?id='+this.id,
                       
                         // https://autumnfish.cn/artist/desc?id=5781

                        methods:'get',
                        params:{
                        
                        }
                //    https://autumnfish.cn/comment/event?threadId=A_EV_2_6559519868_32953014
                }).then(res=>{
                    // 歌手名称s
                    // console.log(res.data.data);

                        this.introduction=res.data.introduction;
                        // console.log(res.data.introduction)
                })
            },
               handleClick(tab, event) {
                    // console.log(tab, event);
               },
               getPlay(id){
                   console.log("id"+id)
                    axios({
                        url:'https://autumnfish.cn/song/url',
                        // 121012393
                    // https://autumnfish.cn/song/url/?id=121012393
                    // https://autumnfish.cn/check/music?id=121012393
                    // https://autumnfish.cn/song/url?id=33894312
                        method:'get',
                        params:{
                            id   //id:id
                        }

                }).then(res=>{
                    console.log(res);
                    let url =res.data.data[0].url
                    console.log(res.data.data[0])
                    console.log(this.$parent)
                    this.$parent.musicUrl=url
                    // console.log(this.$parent);
                    // this.$parent.musicUrl.url=url
                    // console.log(this.$parent.musicUrl);
                })
                   

               }
        },
    }
</script>

<style  scoped>
.index-container .main {
  flex: 1;
  overflow-y: scroll;
  padding: 0px 20px;
}

.index-container .main > div {
  max-width: 1214px;
  margin: 0 auto;
}
    .signer-detail{
        display: flex;
        flex-direction:column;
        width: 1214px;
        height: 187.15px;
        padding: 20px;
    }
    .signer-detail .signer-detail-top{
        display: flex;
        flex-direction: row;
        margin-top: 5px;
    }
    .signer-detail .signer-detail-top .signer-detail-top-img{
        width: 219.33px;
        height: 175px;
    }
    .signer-detail .signer-detail-top .signer-detail-top-img img{
        width: 100%;
        height: 100%;
    }
    .signer-detail .signer-detail-top .signer-detail-top-txt{
        display: flex;
        flex-direction: column;
        width: 913.35px;
        height: 167.15px;
        margin-left: 20px;
    }
    .signer-detail .signer-detail-top .signer-detail-top-txt .name{
        display: flex;
        flex-direction: row;
        width: 913.35px;
        height: 39.15px;
    }
    .signer-detail .signer-detail-top .signer-detail-top-txt .name .name-left{
        display: flex;
        text-align: center;
        justify-content: center;
        padding-top: 3px;
        font-weight: bold;
        font-size: 13px;
        width: 48px;
        height: 27.18px;
        border: 1px solid #df7c7c;
        color:#E83C3C;
        border-radius: 2px;
    }
    .signer-detail .signer-detail-top .signer-detail-top-txt .name .name-right{
        padding-top: 3.1px;
        margin-left: 4px;
        font-size: 15px;
        font-weight: bold;
    }
    .signer-detail .signer-detail-top .signer-detail-top-txt  .detail{
        display: flex;
        flex-direction: column;
        width: 890.21px;
        height: 138.93px;
    }
    .one{
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        width:661.12px;
        height: 22.64px;
    }

     .detail-detail {
         margin-top: 10px;
    
        display: flex;
        white-space: nowrap;
        text-overflow: ellipsis;
        /* overflow: hidden; */
    }
    .signer-detail .signer-detail-bottom{
        display: flex;
        flex-direction: column;
        width: 1140.86px;
    }
    .signer-detail .signer-detail-bottom .title{
        margin-top: 25px;

    }
    .albumSize{
        display: flex;
        flex-direction: row;
        width: 1140.85px;
        height: 1000.03px;
        /* 设置只上下滚动,左右没有超出内容 */
        overflow: auto;
        /* 左右有超出内容 */
        overflow-x: hidden;
        margin-top: 20px;
    }
    .albumSize .albumSize-left{
        width: 140px;
        height: 140px;
    }
    .albumSize .albumSize-left img{
        width: 100%;
        height: 100%;
    }
    .albumSize .albumSize-right{
        width: 900px;
    }
    .albumSize-right-singer{
        /* padding-right: 450px; */
        display: flex;
        flex-direction: row;
        margin-left: 20px;
        width: 978.34px;
        cursor: pointer;
    }
    .albumSize-right-singer .albumSize-right-singer-one{
        /* border: 1px solid grey; */
        margin-left: 22px;
        display: flex;
        flex-direction: row;
        /* width: 978.34px; */
        height: 27.58px;
        
    }
       .albumSize-right-singer:nth-child(odd){
          background: rgb(235, 235, 235);
          /* margin-left: 22px; */
       }
    .albumSize-right-singer .albumSize-right-singer-one .number{
        width: 50px;
        height: 27.58px;
        padding: 5px;
        /* padding-left: 5px; */
        font-size: 13px;
    }
    .albumSize-right-singer .albumSize-right-singer-one .songs-name{
        padding-left: 15px;
        width: 710px;
        height: 27.58px;
        line-height: 25px;
        margin-left: 18px;
        font-size: 13px;
    }
    .geshou-detail-brife{
        font-family: sans-serif;
        text-indent: 2em;
        margin-top: 4px;
   
        text-overflow: ellipsis;
        overflow: hidden;
        letter-spacing: 3px;
    }
    
    /*.signer-detail .signer-detail-bottom .title li{
        align-self: center;
        color: #000000;
        /*   color: #2D8CF0; */
        /* width: 140px;
        height: 63.2px;
        font-size: 15px;
        list-style-type: none;
        line-height: 63.2px; */

    /* }  */
    /* .signer-detail .signer-detail-bottom .title  > li.active{
        align-self: center;
         color: #2D8CF0;
        /*   color: #2D8CF0; */
        /* width: 140px;
        height: 63.2px;
        font-size: 15px;
        list-style-type: none;
        line-height: 63.2px; */

    /* } */ 

</style>